<style>

/*---------- Grid layout of SLE_Sovler ----------*/
/*--- Container for grid layout ---*/
.grid-container {}/*Don't ask me why: it doesn't work without!*/
.grid-container {
  	display: grid;
  	justify-content: start;
  	align-content: start;
  	grid-template-columns: auto auto auto auto auto auto;
}

.grid-itemText{
	text-align: center;
	min-width: 2vw;
	max-width: 2vw;
}

.grid-itemTextArea{
	margin: 0vw 0.5vw 1vh 0vw;
}

/*--- <textareas> ---*/
textarea{
	border: 2px solid #4CAF50; /* Green */;
	box-shadow: 0.5vw 1vh 0.5vw rgba(0,0,0,0.3);
	font-size: 1vw; /*1vw = 1% viewport width*/
	min-width: 20vw;
	max-width: 20vw;
	min-height: 60vh;
	max-height: 60vh;
}

textarea.x{
	min-width: 40vw;
	max-width: 40vw;
}

/*--- Container for checkboxes ---*/
.frameAround {
	border: 2px solid #4CAF50; /* Green */;
	box-shadow: 0.5vw 1vh 0.5vw rgba(0,0,0,0.3);
}

/*--- Buttons ---*/
.button {
	font-family: "Verdana", Sans-serif;
	font-size: 1vw;
    background-color: #4CAF50; /*Green*/
    color: white;
    border: 2px solid #4CAF50; /* Green */
    /*box-shadow: h-shadow v-shadow blur spread color |inset|initial|inherit;*/
    box-shadow: 0.5vw 1vh 0.5vw rgba(0,0,0,0.3);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    min-width: 6vw;
    max-width: 6vw;
    min-height: 7.5vh;
    max-height: 7.5vh;
    margin: 0vw 2vw 0vw 0vw;
    
   	/*Speed of Hover effect*/
    -webkit-transition-duration: 0.1s; /* Safari */
    transition-duration: 0.1s;
}

.button:hover{
	background-color: white;
	color: black;
}


/*--- Image ---*/
.image {
	width: 30vw;
	height: auto;
	margin: 0vh 1vw 0vh 1vw;
}


/*--- Collabsible button ---*/
/*For collabsible documentation.*/
.collapsible {
  	font-family: "Verdana", Sans-serif;
  	font-size: 1vw;
  	background-color: #4CAF50; /*Green*/
  	color: white;
  	border: 2px solid #4CAF50; /* Green */
  	text-align: left;
  	outline: none;
	
  	cursor: pointer;
  	width: 100%;
  	min-height: 2vw;
  	max-height: 2vw;
	margin: 0vh 0vw 1vh 0vw;
  	
  	/*Speed of Hover effect*/
    -webkit-transition-duration: 0.1s; /* Safari */
    transition-duration: 0.1s;
}

/*Appends the + sign at the end of the collabsible.*/
.collapsible:after {
	content: "\002B";/*+ sign*/;
  	color: white;
  	float: right;
}

.active, .collapsible:hover {
	background-color: white;
	color: black;
}

.collapsible:hover:after {
	content: "\002B";/*+ sign*/;
  	color: black;
  	float: right;
}

.active:after {
  	content: "\2212";/*- sign*/
  	color: black;
  	float: right;
}

.active:hover:after {
	content: "\2212";/*- sign*/
  	color: black;
  	float: right;
}

.content {
    background-color: white;
    max-height: 0vw;
    overflow: hidden;
    margin: 0vw 0vw 0vw 0vw;
    
    transition: max-height 0.5s ease-out;
}

<style>
